<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import CustomNavbar from './components/CustomNavbar.vue'
import { onLoad } from '@dcloudio/uni-app'
import type { GuessPlayer, NoticeItem } from '@/types/home'
import { useGuessList } from '@/composables'

// 轮播图
const swiperList = ref<string[]>([])
const getSwiperList = async () => {
  try {
    swiperList.value = [
      'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg',
      'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg',
      'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg',
    ]
  } catch (error) {
    console.error('获取轮播图失败:', error)
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none',
    })
  }
}

// 公告
const noticeList = ref<NoticeItem[]>([])
const getNoticeList = async () => {
  try {
    noticeList.value = [
      { id: 1, title: '王者荣耀陪玩优化专享，会员充值享8折优惠' },
      { id: 2, title: '俱乐部入住限时特惠，10月10号-30号入住，免费推送流量' },
      { id: 3, title: '这是公告3的内容' },
    ]
  } catch (error) {
    console.error('获取轮播图失败:', error)
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none',
    })
  }
}

// 是否加载中标记
const isLoading = ref(false)

// 页面加载
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getSwiperList(), getNoticeList()])
  isLoading.value = false
})

// 猜你喜欢组合式函数调用
const { guessRef, onScrolltolower } = useGuessList()
// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 加载数据
  // await getHomeBannerData()
  // await getHomeCategoryData()
  // await getHomeHotData()
  // 重置猜你喜欢组件数据
  guessRef.value?.resetData()
  await Promise.all([getSwiperList(), getNoticeList(), guessRef.value?.getMore()])
  // 关闭动画
  isTriggered.value = false
}
</script>

<template>
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <CustomNavbar />

    <!-- 滚动容器 -->
    <scroll-view
      enable-back-to-top
      refresher-enabled
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
      @scrolltolower="onScrolltolower"
      class="scroll-view"
      scroll-y
    >
      <!-- 自定义轮播图 -->
      <EtpSwiper :list="swiperList" />
      <!-- 通知 -->
      <EtpNotice :noticeList="noticeList" />
      <!-- 猜你喜欢 -->
      <EtpGuess />
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%; // 确保页面容器占满整个屏幕高度
  overflow: hidden; // 隐藏页面级别的滚动条，禁用页面原生滚动
}

.viewport {
  height: 100%; // 继承页面高度
  display: flex; // 启用 Flex 布局
  flex-direction: column; // 垂直排列子元素
}

.scroll-view {
  flex: 1; // 占据剩余的所有空间，flex: 1 让滚动视图占据除导航栏外的所有剩余空间
  overflow: hidden; // 隐藏溢出内容
}
</style>
